<template>
    <div id="PuzzlePieces" v-if="!isEmpty">
      <p id="PuzzlePiecesText">
        {{ piecesValue }}
      </p>
    </div>
    <div id="EmptyPuzzlePieces" v-else>
        <p id="PuzzlePiecesText">
       {{emptyText}}
      </p>
    </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
data(){
    return {
        emptyText:""
    }
},

  props: {
    piecesValue: Number,
  },
  computed: {
    isEmpty() {
      return this.piecesValue == -1;
    },
  },
  setup() {},
});
</script>
<style scoped>
#PuzzlePieces {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: yellowgreen;
  height: 100px;
  width: 100px;
  margin: 2px;
}
#EmptyPuzzlePieces {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: white;
  height: 100px;
  width: 100px;
  margin: 2px;
}
#PuzzlePiecesText {
  color: white;
  font-size: 24px;
  text-align: center;
}
</style>